<script setup lang="ts">
defineProps({
  title: {
    type: String,
    required: true,
  },
})
const personalRef = ref()
function openPersonalEvent() {
  personalRef.value.open()
}
</script>

<template>
  <view class="mb-6 flex items-center justify-between pt-1">
    <view class="relative flex">
      <text class="text-8 font-700">
        {{ title }}
      </text>
      <view i-carbon:wallet class="ml-2 mt-2 text-theme" />
      <span class="absolute bottom--3 left-0 h-1 w-7 rounded-10 bg-theme" />
    </view>
    <view @click="openPersonalEvent">
      <view i-material-symbols:account-circle-outline class="text-7 text-theme" />
    </view>
  </view>

  <PersonalInfo ref="personalRef" />
</template>
